<template>
  <q-page padding>
    <div v-if="screen.width>500" style="width: 60%;margin: auto" class="dark:tw-text-white q-mt-lg q-pt-lg">

      <div class="row justify-evenly">
        <div class="col-2" style="height: 20%">
          <q-img style="height: 100%" fit="fill" :src="info['avtar']" />
        </div>
        <div class="col-8 column justify-center" style="font-size: 20px">
          <div class="name col-2 q-mb-md">
            <q-icon name="person" />
            {{ info["name"] }}
          </div>
          <div class="birth col-2 q-mt-md">
            <q-icon name="email" />
            {{ info["email"] }}
          </div>
        </div>
      </div>
      <q-separator class="q-ma-lg" />
      <div class="row">
        <h5 class="row title q-pl-md"> ABOUT ME</h5>
      </div>
      <div class="row justify-between">
        <div class="col-3"><span class="slot">性别</span>
          <p>{{ info["gender"] }}</p></div>
        <div class="col-3">
          <span class="slot">籍贯</span>
          <p>{{ info["from"] }}</p></div>
        <div class="col-3">
          <span class="slot">出生日期</span>
          <p>{{ info["birth"] }}</p>
        </div>
      </div>
      <div class="row q-mt-md">
        <div class="col-12">
          <span class="slot">自我介绍</span>
          <p>
            {{ info["intro"] }}
          </p>
        </div>
      </div>

      <q-separator class="q-ma-lg" />

      <div class="row">
        <h5 class="title q-pl-md " style="margin: 0"> Education</h5>
      </div>
      <edu-card v-for="(item,idx) in edu"
                :key="idx"
                :name="item['school']"
                :address="item['address']"
                :major="item['major']"
                :degree="item['degree']"
                :rank="item['rank']"
                :gpa="item['GPA']"
                :date="item['time']"
                :dept="item['college']"

      />
      <!--        <edu-card class="q-mt-md"-->
      <!--                  name="浙江工业大学"-->
      <!--                  address="杭州"-->
      <!--                  major="大数据科学与技术专业"-->
      <!--                  degree="本科"-->
      <!--                  dept="计算机科学技术学院 软件学院"-->
      <!--                  rank="TOP5%"-->
      <!--                  gpa="3.856/5.0"-->
      <!--                  date="2018.09-2022-06"-->
      <!--        />-->
    </div>
    <div v-else style="width: 90%;margin: auto" class="q-mt-lg dark:tw-text-white">
      <div class="tw-grid tw-grid-rows-4 tw-grid-flow-col tw-gap-4">
        <div class="tw-row-span-4 tw-col-span-5">
          <q-img style="height: 100%;width: 100%"
                 class="tw-rounded-sm"
                 fit="fill"
                 src="https://raw.githubusercontent.com/xwyzsn/Picture/master/img/avatar.jpg" />
        </div>
        <div class="tw-row-span-1 tw-row-start-2 "><q-icon name="person"/>{{info['name']}}</div>
        <div class="tw-row-span-1"><q-icon name="email" /> {{info['email']}}</div>
      </div>
      <q-separator class="q-mt-lg q-mb-lg"/>
      <div class="row dark:tw-text-white">
        <h5 class="title q-pl-md " style="margin: 0"> About Me</h5>
      </div>

      <div class="tw-grid tw-grid-cols-2 tw-gap-4 dark:tw-text-white">
        <div ><span class="slot">性别</span>
          <p>{{ info["gender"] }}</p>
        </div>
        <div >
          <span class="slot">籍贯</span>
          <p>{{ info["from"] }}</p></div>
        <div >
          <span class="slot">出生日期</span>
          <p>{{ info["birth"] }}</p>
        </div>
        <div >
          <span class="slot">自我介绍</span>
          <div style="word-wrap: break-word;word-break: break-all;overflow: hidden">
            {{ info["intro"] }}dsadasdasdyhkasjdhjkashdjkashdjkhdkahjsdhjkashdjkashdjkhdkahjsdhjkashdjkashdjkhdkahjsdhjkashdjkashdjkhdkahjs
          </div>
        </div>
      </div>




      <div class="row dark:tw-text-white ">
        <h5 class="title q-pl-md " style="margin: 0"> Education</h5>
      </div>
      <edu-card v-for="(item,idx) in edu"
                :key="idx"
                :name="item['school']"
                :address="item['address']"
                :major="item['major']"
                :degree="item['degree']"
                :rank="item['rank']"
                :gpa="item['GPA']"
                :date="item['time']"
                :dept="item['college']"

      />
    </div>
  </q-page>
</template>

<script>
import EduCard from "components/EduCard";
import { useQuasar } from "quasar";
import { ref } from "vue";
export default {
  // name: 'PageName',
  components: {
    EduCard
  },
  setup() {
    const $q  = useQuasar();
    let screen = ref($q.screen)
    let info = JSON.parse(sessionStorage.getItem("info"))[0];
    let edu = info["edu"];
    return {
      edu,
      info,
      screen
    };
  }

};
</script>

<style>
.title {
  border-left: solid #1976D2 5px;
}

.slot {
  color: #666666;
}
</style>
